<template>
  <div class="message-box">
    <MessageInput @mysend="addMessage"></MessageInput>

    <MessageList :list="msgList.slice((nowPage - 1) * pageSize, pageSize * nowPage)" @clickzan="addZan"></MessageList>

    <Pagination @modifynowpage="updateNowPage" :total="total"></Pagination>
  </div>
</template>

<script>
import MessageInput from './MessageInput.vue';
import MessageList from './MessageList.vue';
import Pagination from "./Pagination.vue"
export default {
  name: 'DEMOMessageBox',

  data() {
    return {
      msgList: [],
      mid: 0,
      total: 1,
      nowPage: 1,
      pageSize: 5
    };
  },
  components: {
    MessageList,
    MessageInput,
    Pagination
  },
  mounted() {

  },

  methods: {
    addMessage(v) {
      this.mid++;
      let msgObj = { mid: this.mid, content: v, zanCount: 0 }
      this.msgList.push(msgObj)

      this.total = Math.ceil(this.msgList.length / this.pageSize)
    },
    addZan(mid) {
      this.msgList.forEach((el, i, arr) => {
        if (el.mid === mid) {
          // el.zanCount++;

          // let n = el.zanCount + 1;
          // this.$set(arr[i], 'zanCount', n)

          let obj = el;
          el.zanCount++;
          this.$set(arr, i, obj)
        }

      })
    },
    updateNowPage(v) {
      this.nowPage = v;
    }
  },
};
</script>

<style lang="less" scoped>
.message-box {
  width: 500px;
  height: 600px;
  background-color: #eb9e9e8a;
  padding: 20px;

  >.message-input-layout {
    background-color: #fff;
    padding: 10px;
  }

  >.message-list {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    list-style-type: none;


  }
}
</style>